<template>
    <div class="mui-numbox" data-numbox-min="1">
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" @change="handleShop"  class="mui-input-numbox" type="number" ref="input" :value="curvalue">
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>
console.log(value

<script>
    // 引入 mui  js  文件
    import mui from '../../lib/mui/js/mui.min.js'

    export default {
        data() {
            return {}
        },
        created() {
        },
        mounted() {
          // 页面加载的时候 启动 按钮
          mui('.mui-numbox').numbox()
        },
        methods: {
            // 根据 input  处理 商品
            handleShop() {
                // 获取 input 得到的value 再进行 去 首位空格
                var value = parseInt(this.$refs.input.value.trim())
                // 如果 value 的 值 大于 最大值 或者 小于 0 弹出 警告信息
                if (value <= 0) return window.alert('请不要随意修改！')
                console.log(value)
                // { id: id, value: value }
                this.$emit('getCount', { value: value, id: this.id })
            }
        },
        // 从 父组件穿过来的 id 现在的 value
        props: ['id', 'curvalue'],
        watch: {

        }
    }
</script>

<style scoped lang="less">
    .mui-numbox {
        height: 25px;
    }
</style>